<template>
  <div class="cascader">
    <el-cascader
      v-model="cascaderValue"
      v-bind="$attrs"
      :inheritAttrs="false"
      :show-all-levels="false"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script>
import { Cascader } from 'element-ui';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "cascader",
  props: {
    extends : Cascader,
    value: {
      type: [Array, String],
      default: () => null,
    },
  },
  watch: {
    value(val){
      this.cascaderValue = val;
    }
  },
  data() {
    return {
      cascaderValue: null,
    };
  },

  mounted() {
    this.cascaderValue = this.value;
  },
  methods: {
    handleChange(val) {
      this.$emit("input", val);
    },
  },
};
</script>